import React from 'react';
import {connect} from 'dva/index';
import {Select, Button, Checkbox, Col, DatePicker, Form, Input, InputNumber, Modal, Radio, Row, Table} from 'antd';
import RoleSelect from "../common/roleSelect";
import BizParams from "../common/BizParams";
import PortSelect from "../common/portSelect";
import Constants from '../../utils/Constants';
import moment from 'moment';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;

const R = require("ramda");
const CheckboxGroup = Checkbox.Group;

const onlineBookingDetail = Form.create()(class OnlineBookingDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false
        }
    }

    handleOpen = (disabled) => {
        this.setState({open: true, disabled});
    }

    handleCancel = () => {
        this.setState({open: false});
        this.props.form.resetFields();
    }

    handleConfirm = (status) => {
        this.props.form.validateFields({force: true}, (errors, values) => {
            if (errors) return;
            values.id = this.props.trailer.oneDetail.dataSource.id
            values.loadingTime = values.loadingTime ? values.loadingTime.format(Constants.DATEFORMAT) : undefined;
            console.log(values)
            this.props.dispatch({
                type: 'trailer/updateOrder',
                payload: {
                    ...values,
                }
            })
            this.handleCancel();
        });
    }

    render() {
        // console.log(this.props.trailer)
        let dataSource = this.props.quickBooking.dataSource ? this.props.quickBooking.dataSource : {};
        let quickBooking = this.props.trailer.oneDetail.dataSource ? this.props.trailer.oneDetail.dataSource : {};
        let oneDetailDataSource = this.props.trailer.oneDetail.dataSource ? this.props.trailer.oneDetail.dataSource : {};
        let formItemLayout = {labelCol: {span: 8}, wrapperCol: {span: 14}};
        let formItemLayout2 = {labelCol: {span: 4}, wrapperCol: {span: 19}};
        const {getFieldDecorator} = this.props.form;

        let footer = [
            /*<Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 1)}
                    style={{display: this.state.disabled ? 'none' : 'inline-block'}}>保存</Button>,*/
            <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this, 1)}
                    style={{display: this.state.disabled ? 'none' : 'inline-block'}}>提交</Button>,
            <Button key="cancel" size="large" loading={this.props.loading}
                    onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        let supplierList = [];
        let serviceItem = this.props.form.getFieldValue('serviceItems');
        if (serviceItem === '3') supplierList = this.props.supplier.airList ? this.props.supplier.airList : [];
        if (serviceItem === '1' || serviceItem === '2') supplierList = this.props.supplier.supplierList ? this.props.supplier.supplierList : [];
        let berthingCompanyList = this.props.berthingCompany.berthingCompanyList ? this.props.berthingCompany.berthingCompanyList : [];


        const columns = [
            {
                title: "项目名字",
                key: "name",
                dataIndex: "name"
            },

            {
                title: "单位",
                key: "unit",
                dataIndex: "unit"
            },
            {
                title: "单价",
                key: "fee",
                dataIndex: "fee"
            },
            {
                title: "数量",
                key: "qty",
                dataIndex: "qty"
            },
            {
                title: "合计",
                key: "subtotal",
                dataIndex: "subtotal"
            }, {
                title: "备注",
                key: "note",
                dataIndex: "note"
            },
        ];


        return (

            <Modal maskClosable={false} visible={this.state.open} width={1000} title="拖车订单详情"
                   confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>


                <Form>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="订单编号" hasFeedback>
                                {getFieldDecorator('orderno', {
                                    initialValue: oneDetailDataSource.orderno
                                })(
                                    <InputNumber disabled={true} min={0} maxLength="18" style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="创建时间" hasFeedback>
                                {getFieldDecorator('createtime', {
                                    initialValue: oneDetailDataSource.createtime
                                })(
                                    <Input disabled={true} placeholder=""
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="城市" hasFeedback>
                                {getFieldDecorator('city', {
                                    initialValue: oneDetailDataSource.city
                                })(
                                    <Input disabled={true} min={0} maxLength="18"
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="区域" hasFeedback>
                                {getFieldDecorator('county', {
                                    initialValue: oneDetailDataSource.county
                                })(
                                    <Input disabled={true} placeholder="" min={0} maxLength="18"
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="装货地址" hasFeedback>
                                {getFieldDecorator('adderss', {
                                    initialValue: oneDetailDataSource.adderss
                                })(
                                    <Input disabled={true} min={0} maxLength="18"
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="装货码头" hasFeedback>
                                {getFieldDecorator('port', {
                                    initialValue: oneDetailDataSource.port
                                })(
                                    <Input disabled={true} placeholder="" min={0} maxLength="18"
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系人" hasFeedback>
                                {getFieldDecorator('contact', {
                                    initialValue: oneDetailDataSource.contact
                                })(
                                    <Input disabled={this.state.disabled} min={0}
                                           style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="手机号" hasFeedback>
                                {getFieldDecorator('mobile', {
                                    initialValue: oneDetailDataSource.mobile
                                })(
                                    <InputNumber disabled={this.state.disabled} placeholder="" min={0} maxLength="11"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>


                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="状态" hasFeedback>
                                {getFieldDecorator('status', {
                                    rules: [{
                                        required: this.state.disabled, message: '请选择状态',
                                    }],
                                    initialValue: parseInt(oneDetailDataSource.status)
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Option value={0}>删除</Option>
                                        <Option value={1}>待处理</Option>
                                        <Option value={2}>已处理</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="总价格(元)" hasFeedback>
                                {getFieldDecorator('total', {
                                    initialValue: oneDetailDataSource.total
                                })(
                                    <InputNumber disabled={this.state.disabled} placeholder="单位：KGS" min={0}
                                                 maxLength="18"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>


                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="20GP数量" hasFeedback>
                                {getFieldDecorator('mySize20gpNum', {
                                    initialValue: oneDetailDataSource.mySize20gpNum
                                })(
                                    <InputNumber disabled={this.state.disabled} placeholder="" min={0} maxLength="18"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="40GP数量" hasFeedback>
                                {getFieldDecorator('mySize40gpNum', {
                                    initialValue: oneDetailDataSource.mySize40gpNum
                                })(
                                    <InputNumber disabled={this.state.disabled} placeholder="" min={0} maxLength="18"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>


                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="报关票数" hasFeedback>
                                {getFieldDecorator('mySizepsNum', {
                                    initialValue: oneDetailDataSource.mySizepsNum
                                })(
                                    <InputNumber disabled={this.state.disabled} placeholder="" min={0} maxLength="18"
                                                 style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="备注信息" hasFeedback>
                                {getFieldDecorator('announcements', {
                                    initialValue: oneDetailDataSource.announcements
                                })(
                                    // <Input.TextArea disabled={true} maxLength="200" style={{ width: '100%' }}  />
                                    <Input disabled={this.state.disabled} maxLength="2000"/>
                                )}
                            </FormItem>
                        </Col>

                    </Row>


                    <Row>


                        <Col span={12}>
                            <FormItem {...formItemLayout} label="注意事项" hasFeedback>
                                {getFieldDecorator('remark', {
                                    initialValue: oneDetailDataSource.remark
                                })(
                                    // <Input.TextArea disabled={true} maxLength="200" style={{ width: '100%' }}  />
                                    <Input disabled={this.state.disabled} maxLength="2000"/>
                                )}
                            </FormItem>
                        </Col>

                    </Row>


                </Form>


                <Table
                    bordered
                    columns={columns}
                    dataSource={oneDetailDataSource.jgdFeeBOList}
                    pagination={false}
                />


            </Modal>
        );
    }
})


export default connect((state) => ({
    loading: state.loading.models.onlineBooking,
    quickBooking: state.quickBooking,
    supplier: state.supplier,
    berthingCompany: state.berthingCompany,
    trailer: state.trailer
}))(onlineBookingDetail);